import React, { useEffect, useState } from 'react'
import './order.css'
import { getOrder } from '../../../request/api'
import { Input, Select, Space,DatePicker, Button, } from 'antd';
const { RangePicker } = DatePicker;
function Order() {
    const [order, setOrder] = useState([]);
    const [orderNumber, setOrderNumber] = useState('');
    const [dateRange, setDateRange] = useState([null, null]);
    const [currentState, setCurrentState] = useState('全部');
    const [refundStatus, setRefundStatus] = useState('');
    const [isFiltered, setIsFiltered] = useState(false);

    useEffect(() => {
        getOrder().then(res => {
            // console.log(res);
            setOrder(res.data.list);
        });
    }, []);

    const handleChange = (value) => {
        console.log(`selected ${value}`);
    };

    const handleStateChange = (state) => {
        const newState = state === currentState ? '全部' : state; // Toggle to '全部' if clicked again
        setCurrentState(newState);
        setIsFiltered(true); // 标记为已应用过滤
    };

    // 处理筛选
    const handleFilter = () => {
        setIsFiltered(true);
    };

    // 根据筛选条件生成过滤的订单
    const getFilteredOrders = () => {
        return order.filter(item => {
            const matchesOrderNumber = orderNumber ? item.dan.toString().includes(orderNumber) : true;

            const matchesDate = dateRange[0] && dateRange[1] ?
                (new Date(item.time) >= dateRange[0].startOf('day').toDate() && 
                 new Date(item.time) <= dateRange[1].endOf('day').toDate()) : true;

            const matchesState = currentState !== '全部' ? item.state === currentState : true;

            const matchesRefundStatus = refundStatus ? item.liushui === refundStatus : true;

            return matchesOrderNumber && matchesDate && matchesState && matchesRefundStatus;
        });
    };

    // 获取筛选后的订单列表
    const filteredOrders = isFiltered ? getFilteredOrders() : order;


    return (
        <div className='order_box'>
            <div className='order_top'>
                <h3>订单管理</h3>
                <div className='order_search'>
                    <p>订单编号:<Input style={{ width: '200px' }}  
                    value={orderNumber} 
                    onChange={e => setOrderNumber(e.target.value)} /></p>
                    <p>下单时间:
                    <RangePicker />
                    </p>
                   
                    <p>下单状态:
                        <Select
                            defaultValue="全部"
                            style={{ width: 120 }}
                            onChange={handleStateChange}
                            options={[
                                { value: '全部', label: '全部' },
                                { value: '待付款', label: '待付款' },
                                { value: '待发货', label: '待发货' },
                                { value: '已完成', label: '已完成' },
                                { value: '已关闭', label: '已关闭' },
                                { value: '待收货', label: '待收货' },
                               
                            ]}
                        /></p>
                    <p>退款状态:
                        <Select
                            defaultValue="暂不选择"
                            style={{ width: 120 }}
                            onChange={handleChange}
                            options={[
                               
                            ]}
                        /></p>
                </div>
                <Button type='primary' onClick={handleFilter}>筛选订单</Button>
                <Button onClick={() => { 
                    setIsFiltered(false);
                    setOrderNumber('');
                    setDateRange([null, null]);
                    setCurrentState('全部');
                    setRefundStatus('');
                }}>清空筛选条件</Button>
                <Button>批量导出</Button>
            </div>
            <div className='order_main'>
                <div className='order_nav'>
                {['全部', '待付款', '待发货', '待收货', '已完成', '已关闭'].map((state) => (
                    <p
                        key={state}
                        onClick={() => handleStateChange(state)}
                        style={{ cursor: 'pointer', fontWeight: currentState === state ? 'bold' : 'normal' }}
                    >
                        {state}
                    </p>
                ))}
                </div>
                <div className='ormain_top'>
                    <p>订单信息</p>
                    <p>卖家</p>
                    <p>收货信息</p>
                    <p>操作</p>
                </div>
                {
                    filteredOrders.map(item => (
                        <div key={item.id} className='order_item'>
                            <div className='mainitem_top'>

                                <div className='itemtop_left'>
                                    <p>订单号：{item.dan}</p>
                                    <p>业务员：{item.name}</p>
                                </div>
                                <div className='itemtop_right'>
                                    <p>共{item.num}件商品</p>
                                    <p>合计:￥{item.qian}</p>
                                </div>

                            </div>

                            <div className='mainitem_bottom'>
                                <div className='bot_img'>
                                    <div className='img_text'>
                                        <dl>
                                            <dt>
                                                 <img src={item.img} alt="" style={{ width: '100px', height: '100px' }} />
                                            </dt>
                                            <dd>
                                            <p>{item.title}</p>
                                            <p>{item.state}</p>
                                            </dd>
                                        </dl>
                                       
                                       
                                    </div>
                                    <div>
                                        <p>￥{item.qian}</p>
                                        <p>x{item.num}</p>
                                    </div>
                                </div>

                                <div className='bot_text'>
                                    <p>果牛群-test</p>
                                </div>
                                <div className='bot_text'>
                                    <p>赵伯颜 11112335352</p>
                                    <p>浙江省杭州市</p>
                                </div>
                                <div className='bot_text'>
                                    <button>订单详情</button>
                                </div>
                            </div>
                        </div>
                    ))
                }
            </div>
        </div>
    )
}

export default Order